<template>
  <Slide right>
    <div class="userInfo">
      <Avatar :size="80" :username="userInfo.username"></Avatar>
   </div>
    <template v-for="item in menu">
      <router-link v-if="item.path" :key="item.path" :to="item.path">
        <i class="iconfont" :class="item.icon" ></i>
        <span>{{item.name}}</span>
      </router-link>
      <a href="javascript:;" @click="command(item.action)" v-if="item.action" :key="item.path">
        <i class="iconfont" :class="item.icon" ></i>
        <span>{{item.name}}</span>
      </a>
    </template>
  </Slide>
</template>

<script>
import { Slide } from 'vue-burger-menu'
import Avatar from 'vue-avatar'
import router from '../models/router'
import { mapState, mapActions } from "vuex"

export default {
  data() {
    return {
      menu: [
        {
          icon: "iconhome",
          path: "/home",
          name: "首页"
        },
        {
          icon: "iconheart",
          path: "page1",
          name: "导航1",
        },
        {
          icon: "iconsolution",
          path: "userForm",
          name: "用户表"
        },
        {
          icon: "iconuser",
          path: "userInfo",
          name: "个人信息"
        },{
          icon: "iconpoweroff",
          action: "logout",
          name: "注销"
        }
      ]
    };
  },
  methods: {
     // 映射 actions
    ...mapActions(['setLoginStatus', 'setUserInfo']),
    command(type) {
      switch(type) {
        case 'logout':
          this.logout();
          break;
      }
    },
    logout() {
      localStorage.removeItem('token');
      // reset store
      this.setLoginStatus(false);
      this.setUserInfo({});
      router.push('/login');
    },
  },
  computed: {
    // 映射state
    ...mapState(["userInfo"])
  },
  components: {
    Slide,
    Avatar,
  }
};
</script>
<style lang='scss'>
.bm-item-list {
  margin-left: 0;
  a {
    padding-left: 10%;
    color: #fff;
    i {
      font-size: 25px;
    }
  }
  a:hover i {
    color: #c94e50;
  }
}
.userInfo {
  display: flex;
  justify-content: center;
}
.bm-burger-button {
  z-index: 99999;
}
</style>